﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Main.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Project Report With Lookups
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<!--  start page-heading -->
<div id="page-heading"><h1>Project Report With Lookups</h1></div>
<!-- end page-heading -->

<table border="0" cellpadding="0" cellspacing="0" id="content-table" width="100%">
<tbody>
<tr>
    <th rowspan="3" class="sized"><img src="/Content/images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
    <th class="topleft"></th>
    <td id="tbl-border-top">&nbsp;</td>
    <th class="topright"></th>
    <th rowspan="3" class="sized"><img src="/Content/images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
    <td id="tbl-border-left"></td>
    <td>
        
        <!--  start content-table-inner -->
        <div id="content-table-inner" style="margin-top:10px; font-size:larger;">
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
	    <tbody>
        <tr valign="top">
	        <td valign="top">	
            <input type="hidden" id="ProjectId" name="ProjectId" />
            <div style="margin-left:10px; font-size:16px">Search Project:</div>
            <input type="text" id="ProjectName" name="ProjectName" class="inp-form" style="margin:10px" />
            <div style="width:100%; height:600px;">
                <div id="tabs">
	                <ul>
		                <li><a href="#tabs-1">Defect Status</a></li>
		                <li><a href="#tabs-2">Defect Priority</a></li> 
                        <li><a href="#tabs-3">Defect Type</a></li>
                        <li><a href="#tabs-4">Project Version</a></li>                                         
	                </ul>

	                <div id="tabs-1">
                        <div id="DefectStatus" style="width: 800px; height: 500px; margin: 0 auto"></div>
	                </div>

	                <div id="tabs-2">
		                <div id="DefectPriority" style="width: 800px; height: 500px; margin: 0 auto"></div>
	                </div>

                    <div id="tabs-3">
                        <div id="DefectType" style="width: 800px; height: 500px; margin: 0 auto"></div>
                    </div>

                    <div id="tabs-4">
                        <div id="ProjectVersion" style="width: 800px; height: 500px; margin: 0 auto"></div>
                    </div>	                
                    
                </div> 
            </div>	                     
        </td>
        </tr>
        <tr>
            <td><img height="1" width="695" alt="blank" src="/Content/images/shared/blank.gif"></td>
            <td></td>
        </tr>
        </tbody>
        </table>
 
        <div class="clear"></div>

        </div>
        <!--  end content-table-inner  -->
    </td>
    <td id="tbl-border-right"></td>
</tr>
<tr>
	<th class="sized bottomleft"></th>
	<td id="tbl-border-bottom">&nbsp;</td>
	<th class="sized bottomright"></th>
</tr>
</tbody>
</table>

<div class="clear">&nbsp;</div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="Fotter" runat="server">
<img id="loading" src="/Content/images/shared/loading51.gif" alt="loading" width="100" height="100" style="z-index: 3333; display: none; position:absolute" />
<script type="text/javascript">
    $("#tabs").tabs();

    $("#loading").ajaxStart(function () {
        $(this).center();
        $(this).show();
    });

    $("#loading").ajaxStop(function () {
        $(this).hide();
    });
</script>
<script src="/Scripts/Highchart/highcharts.js" type="text/javascript"></script>
<script src="/Scripts/Highchart/modules/exporting.js" type="text/javascript"></script>
<script type="text/javascript">

    $("#ProjectName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Project/Search",
                type: "POST",
                dataType: "json",
                data: {
                    Keyword: request.term,
                    ReturnType: "json"
                },
                success: function (projects) {
                    response($.map(projects, function (project) {
                        return {
                            label: project.Name,
                            value: project.Name,
                            projectId: project.Id
                        }
                    }));
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {

            $("#ProjectId").val(ui.item.projectId);

            LoadPieChart("DefectStatus", "DefectStatus");

            LoadPieChart("DefectType", "DefectType");

            LoadPieChart("DefectPriority", "DefectPriority");

            LoadPieChart("ProjectVersion", "ProjectVersion");

        },
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
    

    function LoadPieChart(TypeReport, Container) {

        $.ajax({

            url: "/Report/OnLookups",
            type: "POST",
            dataType: "json",
            data: {
                TypeReport: TypeReport,
                ProjectId: $("#ProjectId").val()
            },
            success: function (data) {

                var options = {
                    chart: {
                        renderTo: Container,
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Defect Tracking System Report'
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.point.number + ' defects';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function () {
                                    return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Defect Tracking System Report'

                    }]
                };

                options.series[0].data = $.map(data, function (row) {
                    return {
                        name: row.Name,
                        y: row.Percent,
                        number: row.Number
                    }
                });

                chart = new Highcharts.Chart(options);
            }
        });
    }

</script>
</asp:Content>
